<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    article{
        background-color:rgb(249 247 241);
        font-family: PT Serif;
    }
    .container{
        column-count: 3;
        /* column-width: 200px; */
        column-rule: 4px dotted rgb(79, 185, 227);
        column-gap: 20px;
    }
    .container h1{
        column-span: all;
        text-align: center;
    }
    .id1{
        column-span: all;
        text-align: center;
    }
</style>
<body>
    <article class="container">
        <!--报纸大标题-->
        <h1 >Newspaper Title</h1>
         <!--时间栏-->
        <div class="id1">
            <time>Sunday, 9<sup>th</sup> September 2021</time>
        </div>
        <!--第一列--> 
        <div >
            <section>
                <h2>WHAI IS CSS？</h2>
                <p>All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">MDN</a></p>
                <p lang="en">
                    <!--这里的图片需要左浮动-->
                    <img style="float:left;height: 40%;width: 40%;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1024px-CSS3_logo_and_wordmark.svg.png"/>
                    <!--段落首字需要大写并且下沉-->
                    CSS is a language for specifying how documents are presented to users — how they are styled, laid out, etc A document is usually a text file structured using a markup language — HTML is the most common markup language, but you may also come across other markup languages such as SVG or XML. Presenting a document to a user means converting it into a form usable by your audience. Browsers, like Firefox, Chrome, or Edge , are designed to present documents visually, for example, on a computer screen, projector or printer.
                </p>
                <p>
                    CSS can be used for very basic document text styling — for example changing the color and size of headings and links. It can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation
                </p>
            </section>
    
            <!--第二列--> 
            <section>
                <h3>The Box Model</h3>
                <p>
                    <!--这里的图片需要右浮动-->
                    <img style="float:right;object-fit: contain;height: 40%;width: 40%;" src="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model/boxmodel-(3).png"/>
                    <!--段落首字需要大写并且下沉-->
                    Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson, we will take a proper look at the CSS Box Model so that you can build more complex layout tasks with an understanding of how it works and the terminology that relates to it.
                </p>
                <!--列表风格需要修改-->
                <ul>
                    <li>The box will break onto a new line.</li>
                    <li>The box will extend in the inline direction to fill the space available in its container. In most cases this means that the box will become as wide as its container, filling up 100% of the space available.</li>
                    <li>The width and height properties are respected.</li>
                    <li>Padding, margin and border will cause other elements to be pushed away from the box</li>
                </ul>
            </section>
            
            <!--第三列-->
            <section>
                <h3>CSS Border Properties</h3>
                <!--段落首字需要大写并且下沉-->
                <p>The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.</p>
                
                <h4>Border Radius Examples</h4>
                <p>We can use the border-radius attribute to make the following shapes</p>
                <!--这里需要添加完成三个不规则形状的出HTML-->
    
                <p>Box-shadow demo</p>
                <p>Neumorphismis also a popular CSS style. Its main principle is to use the boxshadow attribute</p>
                <!--这里需要添加完成拟态效果三个不规则形状的出HTML-->
            </section>
        </div>
    </article>
</body>
</html>